<template>
  <div class="projects-page">
    <common-header>
      <div slot="porjectBtn"></div>
      <div slot="porjectName"></div>
      <div slot="cameraAndCar"></div>
    </common-header>
    <div class="content">
      <Col span="6" style="margin-right:20px;margin-bottom:20px;" v-for="(item,index) in cardsList" :key="index">
        <Card :bordered="true" padding="0">
            <p slot="title">项目名称</p>
            <div class="p-box">
              <p class="p-list">描述：关于项目XXXX的项目描述...</p>
              <p class="p-list">参与人数：45人</p>
              <p class="p-list">开始时间：2015-09-11</p>
            </div>
            <div class="btn-list">
              <Button>直播</Button>
              <Button>车辆</Button>
              <Button @click="goWhiteBorder">进入白版></Button>
            </div>
            <div class='card-bottom'>
              <div class="status">
                <!-- <span class="status-point">·</span> -->
                <Icon class="status-point" type="ios-disc" /><span>正常</span><span class="status-time">2016-12-12</span>
              </div>
              <div class="bottom-btn">
                <span>编辑&nbsp;</span> | <span>&nbsp;更多</span>
                <!-- <Button :size="buttonSize" type="text">编辑</Button>
                <Button :size="buttonSize" type="text">更多</Button> -->
              </div>
            </div>
        </Card>
      </Col>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import CommonHeader from '@/components/header/CommonHeader'

export default {
  data() {
    return {
      cardsList:[1,2,3,4,5,6]
    }
  },
  components: {
    CommonHeader
  },
  methods: {
    goWhiteBorder(){
      this.$router.push({path:'/whiteborder'})
    }
  }
}
</script>

<style scoped lang='scss'>
.projects-page{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;

  .content{
    width: 100%;
    flex: 1;
    padding: 20px 40px;
    background: #000;
    overflow-y: scroll;

    .p-list{
      padding:5px 16px;
      font-size: 14px;
    }

    .btn-list{
      width: 100%;
      display: flex;
      justify-content: center;
      margin-top: 30px;
      margin-bottom: 10px;
      padding-bottom: 5px;
      border-bottom: 1px solid #ccc;
      overflow: hidden;

      .ivu-btn{
        margin-right: 10px;
      }
    }

    .card-bottom{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 20px;
      width: 100%;

      .status{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 60%;
        height: 100%;

        .status-point{
          font-size: 12px;
          color: #7ec856;
        }

        .status-time{
          margin-left: 10px;
          color: #999;
        }
      }

      .bottom-btn{
        display: flex;
        flex:1;
        height: 100%;
        justify-content: flex-end;
        align-items: center;

        span{
          color:#108ee9;
        }
      }
    }
  }
}
</style>
